<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cursor - 高效代码编辑器</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight {
            position: relative;
            z-index: 1;
        }
        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(118, 75, 162, 0.2);
            z-index: -1;
            transition: all 0.3s ease;
        }
        .highlight:hover:after {
            height: 50%;
        }
        .step-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #667eea;
            color: white;
            border-radius: 50%;
            font-weight: bold;
            margin-right: 16px;
            flex-shrink: 0;
        }
        .faq-item {
            transition: all 0.3s ease;
        }
        .faq-item:hover {
            background-color: #f8f9fa;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                        <span class="highlight">Cursor</span> - 智能代码编辑器
                    </h1>
                    <p class="text-xl mb-8 text-gray-100">
                        一款高效、灵活且易于使用的工具，帮助开发者和设计师在日常工作中提升效率。专注于核心业务逻辑，告别繁琐操作。
                    </p>
                    <a href="https://www.cursor.com" class="bg-white text-indigo-600 font-semibold px-8 py-3 rounded-full hover:bg-gray-100 transition duration-300 inline-flex items-center">
                        <i class="fas fa-external-link-alt mr-2"></i> 访问官网
                    </a>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1744012705946-4fbb9ed0-1e0b-4501-b112-4f3cae52120a.png" 
                         alt="Cursor 编辑器界面" 
                         class="rounded-lg shadow-2xl max-w-full h-auto border-4 border-white">
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">主要特点</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">Cursor 提供了一系列强大功能，为开发者带来极致的编码体验</p>
            </div>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 mb-4 text-3xl">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">高效操作</h3>
                    <p class="text-gray-600">支持快速定位和操作，通过键盘或鼠标迅速移动、选择和编辑内容，极大地提升工作效率。</p>
                </div>
                <!-- Feature 2 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 mb-4 text-3xl">
                        <i class="fas fa-sliders-h"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">灵活配置</h3>
                    <p class="text-gray-600">根据个人习惯和项目需求自定义行为和外观，包括主题风格、快捷键设置等，适应不同工作场景。</p>
                </div>
                <!-- Feature 3 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 mb-4 text-3xl">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">跨平台支持</h3>
                    <p class="text-gray-600">Windows、macOS 还是 Linux，Cursor 都能在多平台上稳定运行，保证一致的使用体验。</p>
                </div>
                <!-- Feature 4 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 mb-4 text-3xl">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">集成扩展</h3>
                    <p class="text-gray-600">提供丰富的插件和 API 接口，方便进行二次开发和扩展，与其他开发工具无缝集成。</p>
                </div>
                <!-- Feature 5 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 mb-4 text-3xl">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">易于学习</h3>
                    <p class="text-gray-600">直观的用户界面和详尽的文档，使得新手用户能够快速上手，同时也满足高级用户的定制需求。</p>
                </div>
                <!-- Feature 6 -->
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 mb-4 text-3xl">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">远程协作</h3>
                    <p class="text-gray-600">内置实时协作功能，团队成员可以同时在线编辑和调试，提升协作效率和项目进展速度。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Installation Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">安装与配置</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">简单几步即可开始使用 Cursor 的强大功能</p>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-12">
                <div class="p-8">
                    <h3 class="text-2xl font-bold mb-6">安装步骤</h3>
                    <div class="space-y-8">
                        <!-- Step 1 -->
                        <div class="flex items-start">
                            <div class="step-number">1</div>
                            <div>
                                <h4 class="font-bold mb-2">下载工具包</h4>
                                <p class="text-gray-600">访问 Cursor 官方网站或开源社区，下载最新版本的安装包。</p>
                                <a href="https://www.cursor.com" class="text-indigo-600 hover:text-indigo-800 mt-2 inline-block">
                                    <i class="fas fa-external-link-alt mr-1"></i> https://www.cursor.com
                                </a>
                            </div>
                        </div>
                        <!-- Step 2 -->
                        <div class="flex items-start">
                            <div class="step-number">2</div>
                            <div>
                                <h4 class="font-bold mb-2">运行安装程序</h4>
                                <p class="text-gray-600">根据操作系统选择相应的安装包，运行安装程序并按照提示完成安装。</p>
                            </div>
                        </div>
                        <!-- Step 3 -->
                        <div class="flex items-start">
                            <div class="step-number">3</div>
                            <div>
                                <h4 class="font-bold mb-2">验证安装</h4>
                                <p class="text-gray-600">安装完成后，可以通过命令行或图形界面启动 Cursor 工具，验证是否正确安装。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Config 1 -->
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-indigo-500 mb-4 text-2xl">
                        <i class="fas fa-keyboard"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">快捷键设置</h3>
                    <p class="text-gray-600 mb-4">进入设置界面，选择"快捷键"选项卡，自定义常用操作的快捷键组合。</p>
                    <div class="bg-gray-100 p-3 rounded-lg text-sm">
                        <p class="font-mono">Ctrl + D: 多光标选择</p>
                        <p class="font-mono">Ctrl + Shift + F: 全局搜索</p>
                        <p class="font-mono">Alt + 点击: 添加光标</p>
                    </div>
                </div>
                <!-- Config 2 -->
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-indigo-500 mb-4 text-2xl">
                        <i class="fas fa-palette"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">主题风格</h3>
                    <p class="text-gray-600">在"界面设置"中，可以选择不同的主题和配色方案，以满足不同用户的视觉需求。</p>
                    <div class="flex space-x-2 mt-4">
                        <div class="w-6 h-6 rounded-full bg-gray-800"></div>
                        <div class="w-6 h-6 rounded-full bg-indigo-600"></div>
                        <div class="w-6 h-6 rounded-full bg-blue-500"></div>
                        <div class="w-6 h-6 rounded-full bg-green-500"></div>
                        <div class="w-6 h-6 rounded-full bg-yellow-500"></div>
                    </div>
                </div>
                <!-- Config 3 -->
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-indigo-500 mb-4 text-2xl">
                        <i class="fas fa-plug"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">插件管理</h3>
                    <p class="text-gray-600">通过内置的插件市场，可以安装或更新所需的扩展插件，进一步增强工具功能。</p>
                    <ul class="mt-4 space-y-1 text-sm">
                        <li><i class="fas fa-check text-green-500 mr-2"></i> Git 集成</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i> AI 代码补全</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i> 数据库工具</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Usage Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">基本使用方法</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">掌握这些核心功能，让你的开发效率翻倍</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12">
                <div>
                    <h3 class="text-2xl font-bold mb-6">光标导航</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="text-indigo-500 mr-3 mt-1"><i class="fas fa-keyboard"></i></div>
                            <div>
                                <h4 class="font-bold">键盘导航</h4>
                                <p class="text-gray-600">使用箭头键、Page Up/Down 键或自定义快捷键，实现快速跳转到指定位置。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="text-indigo-500 mr-3 mt-1"><i class="fas fa-mouse-pointer"></i></div>
                            <div>
                                <h4 class="font-bold">鼠标操作</h4>
                                <p class="text-gray-600">通过点击或拖动选择内容，实现精准的文本或代码操作。</p>
                            </div>
                        </li>
                    </ul>
                    
                    <h3 class="text-2xl font-bold mt-10 mb-6">编辑与选择</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="text-indigo-500 mr-3 mt-1"><i class="fas fa-edit"></i></div>
                            <div>
                                <h4 class="font-bold">多光标编辑</h4>
                                <p class="text-gray-600">通过快捷键组合（如 Ctrl + 鼠标点击），可以同时在多个位置进行编辑，提高重复性任务的效率。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="text-indigo-500 mr-3 mt-1"><i class="fas fa-magic"></i></div>
                            <div>
                                <h4 class="font-bold">智能选择</h4>
                                <p class="text-gray-600">利用工具内置的智能算法，自动识别代码块、单词或行，方便进行批量操作。</p>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-2xl font-bold mb-6">集成调试</h3>
                    <div class="bg-gray-800 text-gray-100 p-6 rounded-lg mb-6">
                        <div class="flex items-center mb-4">
                            <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                            <div class="w-3 h-3 rounded-full bg-green-500"></div>
                        </div>
                        <div class="font-mono text-sm">
                            <p class="text-green-400">function calculateTotal(items) {</p>
                            <p class="ml-4 text-yellow-200">  let total = 0;</p>
                            <p class="ml-4 text-yellow-200">  for (let item of items) {</p>
                            <p class="ml-4 text-yellow-200">    total += item.price;</p>
                            <p class="ml-4 text-yellow-200">  }</p>
                            <p class="ml-4 text-yellow-200">  return total;</p>
                            <p class="text-green-400">}</p>
                            <p class="mt-4 text-blue-400">// 点击左侧设置断点</p>
                            <p class="text-blue-400">// 实时查看变量变化</p>
                        </div>
                    </div>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="text-indigo-500 mr-3 mt-1"><i class="fas fa-code-branch"></i></div>
                            <div>
                                <h4 class="font-bold">断点设置</h4>
                                <p class="text-gray-600">直接在编辑界面点击行号设置断点，方便实时调试程序运行状态。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="text-indigo-500 mr-3 mt-1"><i class="fas fa-eye"></i></div>
                            <div>
                                <h4 class="font-bold">变量监控</h4>
                                <p class="text-gray-600">利用工具提供的侧边栏，可以实时查看变量的值变化，辅助定位问题根源。</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Advanced Features Section -->
    <section class="py-16 bg-indigo-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">高级功能</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">为专业开发者打造的强大工具集</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Advanced 1 -->
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-indigo-500 mb-4 text-3xl">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">插件开发与扩展</h3>
                    <p class="text-gray-600 mb-4">开放了丰富的 API 接口，允许开发自定义插件，实现更专业的工作流程。</p>
                    <div class="bg-gray-100 p-3 rounded-lg text-sm">
                        <p class="font-mono">// 示例插件代码</p>
                        <p class="font-mono">cursor.registerCommand('myCommand', () => {</p>
                        <p class="font-mono ml-4">// 自定义逻辑</p>
                        <p class="font-mono">});</p>
                    </div>
                </div>
                
                <!-- Advanced 2 -->
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-indigo-500 mb-4 text-3xl">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">脚本自动化</h3>
                    <p class="text-gray-600">支持用户编写脚本，实现自动化批量操作，节省大量手动操作时间。</p>
                    <ul class="mt-4 space-y-2">
                        <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 批量代码格式化</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 自动生成文档</li>
                        <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> 自定义构建流程</li>
                    </ul>
                </div>
                
                <!-- Advanced 3 -->
                <div class="bg-white p-8 rounded-xl shadow-md">
                    <div class="text-indigo-500 mb-4 text-3xl">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">远程协作</h3>
                    <p class="text-gray-600">内置实时协作功能，团队成员可以同时在线编辑和调试，提升协作效率和项目进展速度。</p>
                    <div class="flex -space-x-2 mt-4">
                        <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="团队成员">
                        <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="团队成员">
                        <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="团队成员">
                        <div class="flex items-center justify-center w-10 h-10 rounded-full bg-indigo-100 border-2 border-white text-indigo-600 font-bold">+3</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold mb-4">常见问题与故障排查</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">遇到问题？这里可能有你需要的答案</p>
            </div>
            
            <div class="max-w-3xl mx-auto">
                <!-- FAQ 1 -->
                <div class="faq-item border-b border-gray-200 py-4">
                    <div class="flex items-center justify-between cursor-pointer group">
                        <h3 class="text-lg font-semibold text-gray-800 group-hover:text-indigo-600">工具响应缓慢？</h3>
                        <i class="fas fa-chevron-down text-gray-500 transform group-hover:rotate-180 transition-transform"></i>
                    </div>
                    <div class="mt-2 text-gray-600">
                        <p>检查是否有插件冲突或系统资源不足，尝试禁用部分扩展后观察改善情况。</p>
                    </div>
                </div>
                
                <!-- FAQ 2 -->
                <div class="faq-item border-b border-gray-200 py-4">
                    <div class="flex items-center justify-between cursor-pointer group">
                        <h3 class="text-lg font-semibold text-gray-800 group-hover:text-indigo-600">快捷键无效？</h3>
                        <i class="fas fa-chevron-down text-gray-500 transform group-hover:rotate-180 transition-transform"></i>
                    </div>
                    <div class="mt-2 text-gray-600">
                        <p>确认是否在设置中正确配置快捷键，或者是否存在系统级快捷键冲突。</p>
                    </div>
                </div>
                
                <!-- FAQ 3 -->
                <div class="faq-item border-b border-gray-200 py-4">
                    <div class="flex items-center justify-between cursor-pointer group">
                        <h3 class="text-lg font-semibold text-gray-800 group-hover:text-indigo-600">调试功能无法启动？</h3>
                        <i class="fas fa-chevron-down text-gray-500 transform group-hover:rotate-180 transition-transform"></i>
                    </div>
                    <div class="mt-2 text-gray-600">
                        <p>检查调试器配置和项目环境设置，确保所有依赖均已正确安装。</p>
                    </div>
                </div>
                
                <!-- FAQ 4 -->
                <div class="faq-item border-b border-gray-200 py-4">
                    <div class="flex items-center justify-between cursor-pointer group">
                        <h3 class="text-lg font-semibold text-gray-800 group-hover:text-indigo-600">如何自定义主题？</h3>
                        <i class="fas fa-chevron-down text-gray-500 transform group-hover:rotate-180 transition-transform"></i>
                    </div>
                    <div class="mt-2 text-gray-600">
                        <p>进入设置 > 外观，选择预设主题或创建自定义主题。支持修改颜色、字体等多种视觉元素。</p>
                    </div>
                </div>
                
                <!-- FAQ 5 -->
                <div class="faq-item border-b border-gray-200 py-4">
                    <div class="flex items-center justify-between cursor-pointer group">
                        <h3 class="text-lg font-semibold text-gray-800 group-hover:text-indigo-600">插件安装失败怎么办？</h3>
                        <i class="fas fa-chevron-down text-gray-500 transform group-hover:rotate-180 transition-transform"></i>
                    </div>
                    <div class="mt-2 text-gray-600">
                        <p>检查网络连接，确保插件与当前版本兼容。如问题持续，尝试手动下载插件包进行安装。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 bg-indigo-600 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl font-bold mb-6">准备好提升你的开发效率了吗？</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto">立即下载 Cursor，体验新一代代码编辑器的强大功能</p>
            <a href="https://www.cursor.com" class="bg-white text-indigo-600 font-semibold px-8 py-3 rounded-full hover:bg-gray-100 transition duration-300 inline-flex items-center">
                <i class="fas fa-download mr-2"></i> 立即下载 Cursor
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-8">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold">技术小馆</h3>
                    <p class="text-gray-400">专业的开发工具与资源分享</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition duration-300">
                        <i class="fas fa-external-link-alt mr-1"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>